<template>
  <div id="app">
    <div class="main-content" v-if="this.$store.state.user">
      <v-header></v-header>
      <div id="content">
        <!-- <div class="mask"></div> -->
        <div class="input-box">
          <v-searchinput></v-searchinput>
          <div class="clear-fix"></div>
        </div>
        <router-view/>
      </div>
      <div class="to-top" @click="to_top">
        <i class="el-icon-arrow-up"></i>
      </div>
      <v-footer></v-footer>
      <div class="wrap"></div>
    </div>
    <div class="login-box" v-if="!this.$store.state.user">
      <v-login :logined="logined"></v-login>
    </div>
  </div>
</template>

<script>
import header from './components/header/header'
import footer from './components/footer/footer'
import searchInput from './components/search/searchInput'
import loginBox from './components/loginBox/login'

export default {
  name: 'App',
  data () {
    return {
      logined:false
    }
  },
  components: {
    'v-header': header,
    'v-footer': footer,
    'v-searchinput': searchInput,
    'v-login':loginBox
  },
  methods: {
    to_top:function () {
      window.scrollTo(0,0)
    }
  },
  mounted: function () {

 }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
/*变化的样式*/
.Mark {
  color: rgb(236, 74, 74);
}
.logo-small {
  /* transform: scale(0.5); */
  display: none;
}
body{
  /* background: url(./assets/image/bg6.jpg); */
  overflow-y: scroll !important;
  background: #7b99da;
  background-size: 100% 100%;
  background-attachment:fixed;
  overflow: hidden;
  font-size: 14px;
  transition: all 0.3s;
  color: white;
  /* overflow-x: hidden !important; */
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif !important;
}
input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #f1f1f1 inset;
}
.input-box {
  background: #7b99da;
  overflow: hidden;
  position: fixed;
  width: 100%;
  /* height: 220px; */
  /* height: 25%; */
  z-index: 998;
  transition: all 0.3s;
}
.clear-fix {
  clear: both;
}
.mask{
  position: fixed;
  z-index: 2;
  top: 0;
  width: 100%;
  height: 13em;
  background: #7b99da;
}
.wrap {
  background: rgba(0, 0,0, 0.2);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  display: none;
}

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  text-align: center;
  
}
#content {
  min-height: 50em;
}
.to-top {
  position: fixed;
  right: 15px;
  bottom: 60px;
  background: #7b99da;
  cursor: pointer;
  border-radius: 50px;
  width: 45px;
  height: 45px;
  line-height: 45px;
  border:1px solid white;
  transition: all 0.3s;
}
.to-top:hover {
  color: white;
  /* background:#409eff; */
  background: #e86f6e;
}
.to-top:after {
  content: '回到顶部';
  position: absolute;
  top: 0;
  top: 40px;
  left: -11px;
  width: 63px;
  transition: all 0.3s;
  opacity: 0;
  color: #7b99da;
}
.to-top:hover:after {
  opacity: 1;
}

/*媒体查询适配移动端*/
@media screen and (max-width: 700px) {
    .to-top {
      display: none;
    }
    .input-box {
      max-height: 43vh;
      /* overflow: hidden; */
      position: fixed;
      top: 0;
    }
    #content {
      min-height: 0em;
    }
    input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
      -webkit-box-shadow: 0 0 0px 1000px #fcfcfc inset;
    }
}
</style>
